@import '../../app.less';

.main {
  .flexbox();
  flex-direction: column;

  .top {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 30vh;
    display: flex;
    justify-content: center;

    image {
      position: absolute;
      top: 5vh;
      z-index: 100;
      width: 80vw;
      height: 40vw;
    }
  }

  .middle {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 24vh;
    display: flex;
    flex-direction: column;
    align-items: center;

    .middle-1 {
      width: 80vw;
      height: 5vh;
      margin-bottom: 0.5vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4vw;
      font-weight: 800;

    }

    .authenticationCode {
      width: 80vw;
      height: 5vh;
      background: rgba(255, 255, 255, 0.25);
      box-shadow: inset 0vw 0vw 2vw rgba(255, 255, 255, 0.25);
      border-radius: 1vw;
      margin-bottom: 0.5vh;
      color: rgba(173, 173, 173, 0.781);
      font-family: 'Microsoft YaHei';
      font-size: 4vw;
      font-weight: 400;
    }
  }

  .bottom {
    position: relative;
    z-index: 100;
    width: 100%;
    height: 15vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .authentication {
      width: 82vw;
      height: 6vh;
      background: rgb(123, 140, 255);
      border-radius: 3vw;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgb(255, 255, 255);
      font-family: Microsoft YaHei;
      font-size: 5.4vw;
      font-weight: 700;
    }
  }
}